<template>
  <view class="local-popup stepper-row" style="background-color: #f5f5f5; height: 100vh">
    <view>
      <!-- 切换栏 -->
      <view class="tabBoxs">
        <view class="tabBox">
          <block v-for="(item, index) in tabList" :key="index">
            <view class="tabItem" :class="current == item.id && current == 1 ? 'activeLeft' : current == item.id && current == 2 ? 'activeRight' : ''" @click="changeTab(item)">
              {{ item.name }}
              <view class="underLine" v-if="current == item.id"></view>
            </view>
          </block>
        </view>
      </view>

      <div class="mendianxinxi" v-if="current == 1">
        <view class="detail-content">
          <view @click="gotoDetail()" class="detail-title" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx">
            <span style="font-family: PingFangSC, PingFang SC; font-weight: 500; font-size: 32rpx; color: #1a1a1a; line-height: 45rpx; text-align: left; font-style: normal">
              {{ detailData.merName || "" }}</span
            >
            <!-- <span style="font-size: 22rpx; color: darkgray; margin-left: 10px">进入店铺>></span> -->
          </view>
          <view style="display: flex; align-items: center; justify-content: space-between">
            <view style="display: flex; flex-direction: column; align-items: flex-start">
              <view>
                <view v-for="(category, index) in detailData.categoryName" :key="index" style="margin: 0 10rpx 10rpx 0; display: inline-block">
                  <text style="font-size: 20rpx; color: #fe7f41; background-color: #fff1eb; padding: 3px 6px">{{ category }}</text>
                </view>
              </view>
              <view
                style="
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #1a1a1a;
                  line-height: 33rpx;
                  text-align: left;
                  font-style: normal;
                  display: flex;
                  align-items: center;
                "
              >
                <image style="width: 28rpx; height: 28rpx" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/21/shijian-3@2x_20250321163041A002.png"></image
                ><span style="margin-left: 10rpx">营业时间：{{ detailData.businessTime || "商家暂未配置~" }}</span>
              </view>
            </view>

            <view v-if="detailData.merPhone" @click="makeCall" style="display: flex; flex-direction: column; align-items: center">
              <image style="width: 48rpx; height: 48rpx; margin-bottom: 4rpx" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/21/phone_20250321152906A002.png"> </image>
              <view style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #1a1a1a; line-height: 33rpx; text-align: left; font-style: normal"> 电话 </view>
            </view>
          </view>
          <view style="margin: 20rpx 0"> <u-line></u-line></view>

          <view
            style="
              display: flex;
              align-items: st;
              margin-top: 20px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #1a1a1a;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            "
          >
            <u-icon name="map" labelSize="30rpx"></u-icon>
            <span @click="gotoDaohang(detailData)" style="display: flex; align-items: center; margin-left: 10rpx"> {{ detailData.merAddress || "" }} </span>
          </view>
        </view>
      </div>
      <view v-else-if="current == 2">
        <view
          class="address acea-row row-between-wrapper"
          @tap="onAddress"
          style="margin: 0 25rpx; margin-top: -8rpx; z-index: 10; position: relative; display: flex; align-items: center; justify-content: space-between"
        >
          <view class="addressCon" v-if="addressInfo.realName">
            <view class="name"
              >{{ addressInfo.realName }}
              <text class="phone">{{ addressInfo.phone }}</text>
            </view>
            <view class="acea-row">
              <text class="default font-color" v-if="addressInfo.isDefault">[默认]</text>
              <text class="line2">{{ (addressInfo.province || "") + (addressInfo.city || "") + (addressInfo.district || "") + (addressInfo.detail || "") }}</text>
            </view>
          </view>

          <view class="addressCon" style="display: flex; align-items: center; justify-content: space-between" v-else>
            <view class="setaddress">设置收货地址</view>
          </view>
          <u-icon name="arrow-right" size="38"></u-icon>
        </view>
      </view>

      <view class="popup-content">
        <view class="content-area">
          <view class="product-info">
            <view class="product-image">
              <image :src="subOrderData && subOrderData.icon && subOrderData.icon.includes('https') ? subOrderData.icon : imgurl + (subOrderData.icon || '')" class="border-radius"></image>
            </view>
            <view class="product-details">
              <view class="product-name">{{ subOrderData.name || "" }}</view>
              <view class="activity-name">{{ subOrderData.ebMerActivityName || "" }}</view>
              <view class="activity-name" v-if="subOrderData.remark" style="margin-top: 8rpx"><span style="color: red">注:</span>{{ subOrderData.remark }}</view>
            </view>
          </view>
          <u-line margin="30rpx 0"></u-line>
          <view class="quantity-row">
            <view class="quantity-label">商品数量</view>
            <view class="quantity-stepper">
              <u-number-box :min="1" button-size="46" v-model="buyNumber" @change="onChangeNumbers" integer :max="subOrderData.purchaseLimit || 999999"></u-number-box>
            </view>
          </view>
          <view class="total-price">
            <view class="total-label"
              >商品总价<span class="total-count">(共{{ buyNumber }}件)</span></view
            >
            <view class="total-value">￥{{ allPrice || "0.00" }}</view>
          </view>
          <u-line margin="30rpx 0"></u-line>
          <!-- 有折扣方式显示 -->
          <!--       <view class="discount-row">
            <view class="discount-label">折扣方式</view>
            <view class="discount-type">{{ discountData.typeName }}</view>
          </view> -->
          <view class="remaining-points">
            <view class="points-label">剩余补贴</view>
            <view class="points-value">{{ jifen || "0" }}</view>
          </view>

          <!-- <view class="address-row" v-if="discountData.type === 2">
            <view class="address-label">请选择房屋信息</view>
            <view class="address-value" @click="handleOpenAddress">
              <span>{{ discountData.address }}</span>
              <u-icon name="arrow-right"></u-icon>
            </view>
          </view> -->
          <view class="final-price" style="display: flex; flex-direction: column; align-items: flex-end">
            <view class="final-label">
              <!-- <span style="display: block; color: #999999; font-size: 12px">最大折扣{{ startJifen }}补贴</span> -->
              <span>使用{{ ((startJifen || 0) * (jsdk.hs || 0)).toFixed(2) }}积分 抵扣￥{{ startJifen.toFixed(2) || "0.00" }}</span>
              <span style="display: block; margin: 10rpx 0"
                >小计<span style="font-size: 20px; color: #fa642f">￥{{ isNaN(allPrice - startJifen) ? "0.00" : (allPrice - startJifen).toFixed(2) }}</span></span
              >
            </view>
          </view>
          <view class="points-return">
            <view class="return-label">现金返利</view>
            <view class="return-value">{{ (returnIntegral || 0).toFixed(2) }}</view>
          </view>
        </view>
        <!-- <view class="placeholder"></view> -->
        <view class="footer-bar">
          <view class="footer-left">
            <view class="total-label">合计￥{{ isNaN(allPrice - startJifen) ? "0.00" : (allPrice - startJifen).toFixed(2) }}</view>
            <view class="discount-label">共{{ buyNumber }}件，已优惠￥{{ startJifen.toFixed(2) || "0.00" }}</view>
          </view>
          <view class="footer-right">
            <!-- <u-button :text="loading ? '提交中...' : '提交订单'" color="#fa642f" shape="circle" size="large" :loading="loading" @click="onSubmit"></u-button> -->
            <button
              :loading="buttonLoading"
              :disabled="buttonLoading"
              style="background-color: #fa642f; width: 90%; height: 40px; border-radius: 10px; color: white; border-radius: 20px; display: flex; align-items: center; justify-content: center"
              @click="debouncedOnSubmit"
            >
              立即抢购
            </button>
          </view>
        </view>
      </view>
    </view>
    <discount ref="discount" :formData="formData" @getInfo="getInfo"></discount>
    <addressWindow
      v-if="okkkks"
      ref="addressWindow"
      @changeTextareaStatus="changeTextareaStatus"
      :address="address"
      :pagesUrl="pagesUrl"
      @OnDefaultAddress="OnDefaultAddress"
      @OnChangeAddress="OnChangeAddress"
      @changeClose="changeClose"
    ></addressWindow>
  </view>
</template>

<script>
import discount from "./discount.vue";
import addressWindow from "./addressWindow.vue";
import { discountMethod, submitOrder, localLifePayment, selectTicketById, getMerInfoByid, orderVerification, toBeUsedOrPay } from "../../../utils/api/local.js";
import getOrderPay from "../../../utils/api/getOrderPay.js";
import { IMG_URL } from "../../../config/index";
import { getDicts } from "../../../utils/request_sh.js";
import { getUserInfo } from "../../../utils/request_api.js";
export default {
  mixins: [getOrderPay],
  components: {
    discount,
    addressWindow,
  },

  onLoad(option) {
    // this.subOrderData = JSON.parse(option.subOrderData);
    this.checked = option.checked;
    this.waterRemark = option.remark;
    this.getCheckData();
    console.log("🚀 ~ onLoad ~ this.subOrderDat:", this.subOrderData);
    //
    this.ebMerActivityTicketId = this.checked;
    this.ebMerActivityId = option.activeId;
    this.buyNumber = option.buyNumber || 1;
    // this.handleOpen(this.ebMerActivityTicketId);
    // this.getMerInfoByidd(option.businessId, option.id);
    this.businessId = option.businessId;
  },
  computed: {
    integralGive() {
      let number = (this.subOrderData.integralGive || 0) * this.buyNumber;
      return number.toFixed(2);
    },
  },
  data() {
    return {
      waterRemark: "" /* 水卡信息 */,
      yaoiqngID: "" /* 推广人用户ID */,
      businessId: "",
      activityLists: [],
      okkkk: false,
      okkkks: false,
      buttonLoading: false,
      comunityIntegralUse: 0,
      comunityIntegralDeduction: 0,
      returnIntegral: 0,
      addressInfo: "",
      tabList: [
        { id: 1, name: "到店自取" },
        { id: 2, name: "上门配送" },
      ],
      detailData: {},
      indaawdwafa: {},
      current: 1, // 默认选中第一个标签
      type: "",
      isQuickDeliveryActive: true, // 默认显示 "到店自提"
      subOrderData: {},
      ebMerActivityTicketId: "",
      ebMerActivityId: "",
      imgurl: IMG_URL,
      jsdk: {},
      userInfo: "",
      jifen: 0,
      buyNumber: 1,
      startJifen: 0,
      hadwad: 0,
      discountData: {
        type: 0,
        typeName: "",
        comunityIntegralDeduction: "",
        comunityIntegralUse: "",
        consumeIntegraBalance: "",
        consumeIntegralDeduction: "",
        consumeIntegralUse: "",
        frontComunityInteralPoVoList: [],
      },
      formData: { frontComunityInteralPoVoList: [] },
      loading: false,
      dadvfojinjn: 0,
      orderType: "pay_ls",
      price: "",
      allPrice: 0.0 /** 商品总价 保留两位小数 */,
    };
  },
  onShow() {
    this.userInfo = uni.getStorageSync("userInfo");
    this.debouncedOnSubmit = this.debounce(this.onSubmit, 300); // 设置防抖间隔为 300 毫秒
    this.okkkks = false;
    this.$nextTick(() => {
      this.okkkks = true;
      // this.$refs.addressWindow.openPopup();
    });
  },
  methods: {
    // getMerInfoByidd(businessId, id) {
    //   getMerInfoByid({ id: businessId, isDefMerActive: this.type }).then((res) => {
    //     this.detailData = res.data.ebMer;
    //     this.activityLists = res.data.activityList;
    //     this.detailData.categoryName = res.data.ebMer.categoryName.split(",");
    //     this.detailData.businessTime = res.data.ebMer.businessTime ? res.data.ebMer.businessTime.split(",").join(" - ") : "商家暂未配置~";
    //     this.detailData.ebUserId = res.data.ebMer.ebUserId;
    //     this.activityLists.forEach((item) => {
    //       if (item.id == this.ebMerActivityId) {
    // 		  this.indaawdwafa = item
    // 		  this.initReturn()
    //       }
    //     });
    //   });
    // },
    initReturn() {
      console.log(parseFloat(this.indaawdwafa.lsSplittingPlatform));
      if (this.indaawdwafa.isWatercard != 0) {
        this.returnIntegral = parseFloat(this.indaawdwafa.memberReturnbl) * this.buyNumber * this.jsdk.price;
      } else {
        this.returnIntegral = 0;
      }
      // getMerInfoByid
    },
    async getCheckData() {
      this.loading = true;
      var user = await getUserInfo();
      var dawd = await getMerInfoByid({ id: this.businessId, isDefMerActive: this.type });
      var ptfl = await getDicts("ptfl");
      if (ptfl.data.length > 0) {
        this.dadvfojinjn = parseFloat(ptfl.data[0].dictValue);
      }
      this.detailData = dawd.data.ebMer;
      this.activityLists = dawd.data.activityList;
      this.detailData.categoryName = dawd.data.ebMer.categoryName.split(",");
      this.detailData.businessTime = dawd.data.ebMer.businessTime ? dawd.data.ebMer.businessTime.split(",").join(" - ") : "商家暂未配置~";
      this.detailData.ebUserId = dawd.data.ebMer.ebUserId;
      this.activityLists.forEach((item) => {
        if (item.id == this.ebMerActivityId) {
          this.indaawdwafa = item;
        }
      });
      var jifen = user.data.gpWyPaymentAmount;
      this.jifen = user.data.gpWyPaymentAmount;
      selectTicketById({ id: this.checked }).then((res) => {
        this.loading = false;
        this.subOrderData = res.data || {};
        // 最大抵扣金额
        var hs = parseFloat(res.data.integralPropertyConversion);
        console.log(hs);
        // 抵扣类型
        var dktype = res.data.integralComunityDiscountType;
        // 抵扣金额
        var dkpice = parseFloat(res.data.integralComunityValueDiscount);
        console.log(dkpice);
        // 抵扣比例
        var dkbl = parseFloat(res.data.integralComunityDiscount);
        var price = parseFloat(res.data.price);
        var integralComunityDiscount = parseFloat(res.data.integralComunityDiscount);
        this.jsdk = {
          hs: hs,
          dktype: dktype,
          dkpice: dkpice,
          dkbl: dkbl,
          price: price,
          integralComunityDiscount: integralComunityDiscount,
        };
        this.initJfJS();
        this.initReturn();
        // this.subOrderData.activeName = this.detailData.name;
        // this.subOrderData.merAvatar = this.detailData.merAvatar;
        // this.subOrderData.ebUserId = this.subOrderebUserId;
        // uni.navigateTo({
        //   url: "/pages_h5/index/components/subOrderNo?subOrderData=" + JSON.stringify(this.subOrderData) + "&ebMerActivityTicketId=" + this.checked + "&ebMerActivityId=" + this.activeId + "&businessId=" + this.businessId+"&type="+this.type,
        // });
      });
    },
    onChangeNumbers(val) {
      this.buyNumber = Number(val.value) || 1;
      this.$forceUpdate();
      this.initJfJS();
      this.initReturn();
    },
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: this.detailData.merPhone,
      });
    },
    initJfJS() {
      this.startJifen = 0;
      var startJifen = 0;
      console.log(this.buyNumber);
      if (this.jsdk.dktype == 1) {
        var d = this.jsdk.hs * this.jsdk.dkpice * this.buyNumber;
        console.log("dddd" + d);
        if (d > this.jifen) {
          startJifen = parseInt(parseFloat(this.jifen) / this.jsdk.hs);
        } else {
          startJifen = this.jsdk.dkpice * this.buyNumber;
        }
        console.log(startJifen);
      } else if (this.jsdk.dktype == 2) {
        var d = this.jsdk.price * this.buyNumber * this.jsdk.integralComunityDiscount * this.jsdk.hs;
        if (d > this.jifen) {
          startJifen = parseInt(parseFloat(this.jifen) / this.jsdk.hs);
        } else {
          startJifen = this.jsdk.price * this.buyNumber * this.jsdk.integralComunityDiscount;
        }
      }
      this.startJifen = startJifen;
      this.allPrice = (this.buyNumber * this.jsdk.price).toFixed(2);
    },
    // 定义防抖函数
    debounce(func, wait) {
      let timeout;
      return function (...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
      };
    },
    /**
     * 首次进页面展示默认地址
     */
    OnDefaultAddress: function (e) {
      this.addressInfo = e;
    },
    /**
     * 选择地址后改变事件
     * @param object e
     */
    OnChangeAddress: function (e) {
      this.addressInfo = e;
    },
    onAddress() {
      this.okkkks = true;
      this.$refs.addressWindow.openPopup();
    },
    changeTab(item) {
      console.log("🚀 ~ item:", item);
      if (item.id == 2) {
        uni.showToast({
          title: "暂不支持上门配送",
          icon: "none",
        });
      } else {
        this.current = item.id;
      }
    },

    setTab(tab) {
      if (tab === "quickDelivery") {
        this.isQuickDeliveryActive = true;
      } else {
        this.isQuickDeliveryActive = false;
      }
    },
    /** 步数器更改 */
    onChangeNumber(val) {
      // 修改点1：直接使用事件回调值，避免异步问题
      // u-number-box的change事件参数val包含{value, step}
      const currentValue = Number(val.value) || 1; // 获取当前最新值
      let price = Number(this.subOrderData.price || 0);

      // ：立即更新buyNumber的值
      this.buyNumber = currentValue;

      // 使用最新值计算总价
      this.allPrice = (currentValue * price).toFixed(2);

      // 传递最新计算值
      this.getPrice(this.allPrice);
    },
    getPrice(val) {
      /**
       * 物业补贴抵扣
       * 1.根据输入金额计算最大可抵扣金额
       * 2.根据抵扣金额计算需扣除补贴
       */
      let gpWyPaymentAmount = Number(this.userInfo.gpWyPaymentAmount || 0);
      if (Number(this.formData.wuyejifenRmbExchangeBili || 0)) {
        let maxComunityPrice = val * (this.formData.integralComunityDiscountBili || 0);
        4;
        this.startJifen = (maxComunityPrice / this.formData.wuyejifenRmbExchangeBili).toFixed(2); //商品初始全部补贴
        /** 当前补贴最大可抵扣金额 */
        let integraComunityPrice = gpWyPaymentAmount * this.formData.wuyejifenRmbExchangeBili;
        200;
        if (maxComunityPrice > integraComunityPrice) {
          this.formData.comunityIntegralUse = gpWyPaymentAmount.toFixed(2);
          this.formData.comunityIntegralDeduction = integraComunityPrice.toFixed(2);
        } else {
          this.formData.comunityIntegralUse = (maxComunityPrice / this.formData.wuyejifenRmbExchangeBili).toFixed(2);
          this.formData.comunityIntegralDeduction = maxComunityPrice.toFixed(2);
        }
      } else {
        this.formData.comunityIntegralUse = 0.0;
        this.formData.comunityIntegralDeduction = 0.0;
      }

      this.$refs.discount.getInfo(this.discountData.type);
    },
    // async handleOpen(id) {
    //   var user = await getUserInfo();
    //   if (user.code == 401) {
    //     uni.showToast({
    //       title: "您的登录已过期，请重新登录",
    //       icon: "none",
    //     });
    //     return;
    //   } else {
    //     uni.setStorageSync("userInfo", user.data);
    //     this.userInfo = user.data;
    //   }
    //   try {
    //     await this.discountMethod(id);
    //     // if (Number(this.startJifen) > Number(this.userInfo.gpWyPaymentAmount)) {
    //     //   uni.showModal({
    //     //     title: "提示",
    //     //     content: "补贴余额不足以达到最高折扣金额，是否前往缴纳物业费获取补贴？",
    //     //     confirmText: "前往",
    //     //     cancelText: "取消",
    //     //     success: (res) => {
    //     //       if (res.confirm) {
    //     //         uni.navigateTo({
    //     //           url: "/pages/integral/points-refund/comunity-integral",
    //     //         });
    //     //       }
    //     //     },
    //     //   });
    //     // }
    //   } catch (e) {
    //     console.error("补贴信息加载失败", e);
    //     uni.showToast({
    //       title: "补贴信息加载失败，请稍后再试",
    //       icon: "none",
    //     });
    //   }
    // },

    getInfo(data) {
      this.discountData = data;
    },
    // getAddress(data) {
    //   this.discountData.accumulationFund = data.accumulationFund || 0;
    //   this.discountData.ebComunityHouseId = data.ebComunityHouseId;
    //   this.discountData.address = data.address;
    // },
    onChange(type) {
      this.orderType = type;
    },
    async onSubmit() {
      try {
        console.log("🚀 ~ success ~ that.subOrderData.isAuto:", this.subOrderData.isAuto);
        const deductionOrdersPrice = this.userInfo.isComunityVip == 1 ? (this.allPrice - this.formData.comunityIntegralDeduction).toFixed(2) : Number(this.allPrice).toFixed(2);
        // if (this.orderType === "pay_yue" && Number(this.userInfo.nowMoney || 0) < deductionOrdersPrice) {
        //   this.$toast("账户余额不足，请先充值");

        //   return;
        // }

        this.loading = true;
        this.buttonLoading = true;
        let that = this;
        let params = {
          ebUserId: uni.getStorageSync("uid"),
          ebMerActivityTicketId: this.checked,
          ebMerActivityId: this.ebMerActivityId,
          deductionPrice: this.startJifen,
          deductionType: 2,
          gainIntegral: 0.0,
          isChannel: 6,
          make: "",
          payPrice: this.allPrice - this.startJifen,
          payType: "lszfxcx",
          proTotalPrice: this.allPrice,
          totalNum: this.buyNumber,
          totalPrice: this.subOrderData.price,
          useIntegralComunity: (this.startJifen * this.jsdk.hs).toFixed(2),
          useIntegralConsume: 0.0,
          ebComunityHouseId: 0,
          orderType: 2,
          shippingType: this.current == 1 ? 2 : 1,
          realName: this.addressInfo.realName,
          userPhone: this.addressInfo.phone,
          userAddress: this.addressInfo.province + this.addressInfo.city + this.addressInfo.district + this.addressInfo.detail,
          payWatercardInviteUserId: this.yaoiqngID || this.detailData.ebUserId,
          businessId: this.businessId,
          dealEbMerId: this.businessId,
          returnIntegral: (this.returnIntegral || 0).toFixed(2),
          remark: this.waterRemark,
        };
        if (this.current == 2) {
          if (
            !this.addressInfo ||
            this.addressInfo.realName == "" ||
            this.addressInfo.phone == "" ||
            this.addressInfo.province == "" ||
            this.addressInfo.city == "" ||
            this.addressInfo.district == "" ||
            this.addressInfo.detail == "" ||
            this.addressInfo.realName == null ||
            this.addressInfo.phone == null ||
            this.addressInfo.province == null ||
            this.addressInfo.city == null ||
            this.addressInfo.district == null ||
            this.addressInfo.detail == null
          ) {
            uni.showToast({
              title: "请填写收货信息",
              icon: "none",
            });
            this.loading = false;
            this.buttonLoading = false;
            return;
          }
        }
        // if (this.okkkk) {
        //   params.orderType = 8;
        // }
        if (this.subOrderData.isLaundry == 0) {
          params.orderType = 7;
        }
        submitOrder(params).then((res) => {
          console.log("submitOrder" + res);
          var pae = {
            uni: res.data.id,
            orderNo: res.data.orderId,
            payChannel: "public",
            payType: "lszfxcx",
            scene: 0, //下单时小程序的场景值
          };
          localLifePayment(pae).then((obj) => {
            console.log("localLifePayment" + obj);
            if (obj.code == 200) {
              uni.requestPayment({
                timeStamp: obj.data.jsConfig.timeStamp, //后端返回的时间戳
                nonceStr: obj.data.jsConfig.nonceStr, //后端返回的随机字符串
                package: obj.data.jsConfig.packages, //后端返回的prepay_id
                signType: "RSA", //后端签名算法,根据后端来,后端MD5这里即为MD5
                paySign: obj.data.jsConfig.paySign, //后端返回的签名
                payCompletedPageOptions: {
                  showNavBackButton: true,
                },
                success(resdw) {
                  uni.hideLoading();
                  console.log("订单支付完成！" + resdw);
                  that.loading = false;
                  that.buttonLoading = false;
                  resdw.payCompletedPage.onUnload((dawd) => {
                    setTimeout(() => {
                      if (that.subOrderData.isAuto == 1) {
                        let ticketCode;
                        toBeUsedOrPay({ orderId: res.data.orderId }).then((res) => {
                          if (res && res.code === 200) {
                            ticketCode = res.data.ebMerActivityTicketRecordList[0].ticketCode || [];
                            orderVerification({
                              ticketCode: ticketCode,
                              userId: 63,
                            }).then((res) => {
                              that.onShow = false;
                              if (res.code) {
                                uni.switchTab({
                                  url: "/pages_h5/index/index",
                                });
                              }
                            });
                          }
                        });
                        uni.showToast({
                          title: "订单支付成功",
                          icon: "success",
                        });
                      } else {
                        uni.redirectTo({
                          url: `/pages_h5/local_life/components/order_detail?status=1&orderId=${res.data.orderId}&id=${res.data.id}`,
                          complete(err) {
                            that.loading = false;
                            that.buttonLoading = false;
                            console.log(err);
                          },
                        });
                      }
                    }, 500);
                  });
                },
                fail(resdw) {
                  that.loading = false;
                  that.buttonLoading = false;
                  uni.hideLoading();
                  setTimeout(() => {
                    console.log(res.data.orderId);
                    // uni.switchTab({
                    //   url: "/pages_h5/index/index", // 点击左上角返回按钮，会触发支付回调页onUnload 事件，在 onUnload 事件触发时可以跳转到别的页面
                    // });
                    uni.redirectTo({
                      url: `/pages_h5/local_life/components/order_detail?status=1&orderId=${res.data.orderId}&id=${res.data.id}&status=0`,
                      complete(err) {
                        console.log(err);
                      },
                    });
                  }, 500);
                },
              });
              this.loading = false;
              this.buttonLoading = false;
            } else {
              uni.showToast({
                title: "下单失败了，请稍后再试",
                icon: "none",
              });
              this.buttonLoading = false;
            }
          });
        });
      } catch (error) {
        this.loading = false;
        this.buttonLoading = false;
        uni.showToast({
          title: "请求失败",
          icon: "none",
          duration: 2000,
        });
      } finally {
        this.loading = false;
      }
    },
    async discountMethod(id) {
      try {
        const res = await discountMethod({
          ticket_id: id,
          user_id: uni.getStorageSync("uid"),
        });
        this.formData = res.data || {};
        if (res.data.frontComunityInteralPoVo) {
          this.jifen = res.data.frontComunityInteralPoVo.accumulationFund || 0;
        }
        this.$nextTick(() => {
          let temp = this.formData.frontComunityInteralPoVo != null ? 2 : 0;
          if (temp === 2) {
            if (this.userInfo.isComunityVip != 1) {
              temp = 0;
            }
          }
          this.discountData.type = temp;
          this.onChangeNumber({ value: 1 });
        });
      } catch (error) {
        console.error("折扣方式加载失败", error);
        uni.showToast({
          title: "获取折扣方式失败，请稍后再试",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.border-radius {
  width: 88rpx;
  height: 88rpx;
  border-radius: 20rpx;
}

.local-popup {
  .popup-content {
    margin: 25rpx;
    padding: 20rpx;
    background: #fff;
    border-radius: 20rpx;

    .title-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx 0;

      .title-text {
        font-size: 26rpx;
        font-weight: bold;
      }

      .close-icon {
        cursor: pointer;
      }
    }

    .product-info {
      display: flex;
      margin-top: 20rpx;

      .product-image {
        width: 150rpx;
        height: 150rpx;
        margin-right: 20rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .product-details {
        .product-name {
          font-size: 30rpx;
          font-weight: bold;
          margin-bottom: 20rpx;
        }

        .activity-name {
          font-size: 26rpx;
          color: #666;
        }
      }
    }

    .quantity-row,
    .total-price,
    .discount-row,
    .remaining-points,
    .final-price,
    .points-return {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
    }

    .quantity-label,
    .total-label,
    .discount-label,
    .points-label,
    .final-label,
    .return-label {
      font-size: 14px;
      color: #1a1a1a;
      font-weight: bold;
    }

    .quantity-stepper {
      width: 200rpx;
    }

    .total-value,
    .discount-type,
    .points-value,
    .return-value {
      font-size: 26rpx;
      color: #fa642f;
    }

    .total-count {
      font-size: 22rpx;
      color: #999;
    }

    .final-price,
    .points-return {
      margin-top: 10rpx;
    }

    .footer-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      position: fixed;
      bottom: 10rpx;
      left: 0;
      right: 0;

      .footer-left {
        .total-label {
          font-size: 32rpx;
          font-weight: bold;
          color: #fa642f;
        }

        .discount-label {
          font-size: 26rpx;
          color: #666;
        }
      }

      .footer-right {
        width: 320rpx;
      }
    }

    .placeholder {
      height: 150rpx;
    }
  }

  .tabs-container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 50px;
  }

  .tab {
    width: 40%;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    background-color: #f1f1f1;
    border-top: 2px solid transparent;
  }

  .tab:hover {
    background-color: #eee;
  }

  .tab.active {
    background-color: #ff6b6b;
    color: white;
    border-top: 2px solid #ff6b6b;
  }

  .tab-content {
    margin-top: 10px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
  }

  button {
    background-color: #ff6b6b;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    width: 100%;
  }

  button:hover {
    background-color: #e55b5b;
  }
}

.detail-content {
  background: #ffffff;
  // box-shadow: 0rpx 2rpx 14rpx 0rpx rgba(62, 109, 201, 0.15);
  padding: 15px;
  border-radius: 0 0 10px 12px;
  margin: 0 25rpx;
  margin-top: -8rpx;
  z-index: 10;
  position: relative;
  /* 添加 position 属性 */
}

.detail-footer-container {
  position: fixed;
  bottom: 0;
  z-index: 100;
  background-color: #ffffff;
  width: 100%;
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}

.footer-buttons-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
}

.button-group {
  display: flex;
  align-items: center;
}

.button-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 16px;
}

.button-text {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #9f9d99;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
}

.action-button {
  width: 213rpx;
  height: 92rpx;
}

.tabBoxs {
  margin: 0 25rpx;
  margin-top: 20rpx;
  height: 96rpx;
  border-radius: 15rpx 15rpx 0 0;
  position: relative;

  .tabBox {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 84rpx;
    background: #d6d5d5;
    border-radius: 15rpx 15rpx 0rpx 0rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .tabItem {
      flex: 1;
      text-align: center;
      font-size: 30rpx;
      color: #3d3d3d;
      position: relative;

      .underLine {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 78rpx;
        height: 9rpx;
        // background-color: #FC5C2B;
        border-radius: 60rpx 60rpx 60rpx 60rpx;
      }
    }

    .activeLeft {
      border-top: 1px solid #fc5c2b;
      transform: translateY(-8rpx);
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15rpx 15rpx 0 0;
      background-color: #ffffff;
      font-size: 32rpx;
      color: #fc5c2b;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        right: -8px;
        width: 40rpx;
        height: 96rpx;
        border-radius: 0 11px 0 0;
        background-color: #ffffff;
        transform: skewX(8deg);
      }
    }

    .activeRight {
      border-top: 1px solid #fc5c2b;
      transform: translateY(-8rpx);
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15rpx 15rpx 0 0;
      background-color: #ffffff;
      font-size: 32rpx;
      color: #fc5c2b;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: -8px;
        width: 40rpx;
        height: 96rpx;
        border-radius: 11px 0 0 0;
        background: #ffffff;
        transform: skewX(-8deg);
      }
    }
  }
}

/* 复
制
代
码 */

.address {
  padding: 28rpx;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 26rpx;
}

.address .addressCon {
  margin: 0 25rpx;
  color: #666;
}

.address .addressCon .name {
  font-size: 30rpx;
  color: #282828;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.address .addressCon .name .phone {
  margin-left: 50rpx;
}

.address .addressCon .default {
  margin-right: 12rpx;
}

.address .addressCon .setaddress {
  color: #333;
  font-size: 28rpx;
}

.address .iconfont {
  font-size: 35rpx;
  color: #707070;
}

.allAddress {
  width: 100%;
  background: linear-gradient(to bottom, #e93323 0%, #f5f5f5 100%);
  padding: 100rpx 30rpx 0 30rpx;
}

.allAddress .nav {
  width: 690rpx;
  margin: 0 auto;
}

.allAddress .nav .item {
  width: 334rpx;
}

.allAddress .nav .item.on {
  position: relative;
  width: 230rpx;
}

.allAddress .nav .item.on::before {
  position: absolute;
  bottom: 0;
  content: "快递配送";
  font-size: 28rpx;
  display: block;
  height: 0;
  width: 336rpx;
  border-width: 0 20rpx 80rpx 0;
  border-style: none solid solid;
  border-color: transparent transparent #fff;
  z-index: 2;
  border-radius: 14rpx 36rpx 0 0;
  text-align: center;
  line-height: 80rpx;
}

.allAddress .nav .item:nth-of-type(2).on::before {
  content: "到店自提";
  border-width: 0 0 80rpx 20rpx;
  border-radius: 36rpx 14rpx 0 0;
}

.allAddress .nav .item.on2 {
  position: relative;
}

.allAddress .nav .item.on2::before {
  position: absolute;
  bottom: 0;
  content: "到店自提";
  font-size: 28rpx;
  display: block;
  height: 0;
  width: 401rpx;
  border-width: 0 0 60rpx 60rpx;
  border-style: none solid solid;
  border-color: transparent transparent #f7c1bd;
  border-radius: 36rpx 14rpx 0 0;
  text-align: center;
  line-height: 60rpx;
}

.allAddress .nav .item:nth-of-type(1).on2::before {
  content: "快递配送";
  border-width: 0 60rpx 60rpx 0;
  border-radius: 14rpx 36rpx 0 0;
}

.allAddress .address {
  width: 690rpx;
  max-height: 180rpx;
  margin: 0 auto;
}

.allAddress .line {
  width: 100%;
  margin: 0 auto;
}

.wrapper .item .discount .placeholder {
  color: #ccc;
}

.wrapper {
  background-color: #fff;
  margin-top: 15rpx;
}

.wrapper .item {
  padding: 27rpx 24rpx;
  font-size: 30rpx;
  color: #333333;
  border-bottom: 1px solid #f5f5f5;
}

.wrapper .item .discount {
  font-size: 30rpx;
  color: #333;
}

.wrapper .item .discount .iconfont {
  color: #515151;
  font-size: 30rpx;
  margin-left: 15rpx;
}

.wrapper .item .discount .num {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.wrapper .item .shipping {
  font-size: 30rpx;
  color: #999;
  position: relative;
  padding-right: 58rpx;
}

.wrapper .item .shipping .iconfont {
  font-size: 35rpx;
  color: #707070;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 30rpx;
}

.wrapper .item textarea {
  background-color: #f9f9f9;
  width: auto !important;
  height: 140rpx;
  border-radius: 14rpx;
  margin-top: 30rpx;
  padding: 15rpx;
  box-sizing: border-box;
  font-weight: 400;
}

.wrapper .item .placeholder {
  color: #ccc;
}

.wrapper .item .list {
  margin-top: 35rpx;
}

.wrapper .item .list .payItem {
  border: 1px solid #eee;
  border-radius: 14rpx;
  height: 86rpx;
  width: 100%;
  box-sizing: border-box;
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #282828;
}

.wrapper .item .list .payItem.on {
  border-color: #fc5445;
  color: #fc5445;
}

.wrapper .item .list .payItem .name {
  width: 50%;
  text-align: center;
  border-right: 1px solid #eee;
}

.wrapper .item .list .payItem .name .iconfont {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 44rpx;
  background-color: #fe960f;
  color: #fff;
  font-size: 30rpx;
  margin-right: 15rpx;
}

.wrapper .item .list .payItem .name .iconfont.icon-weixin2 {
  background-color: #41b035;
}

.wrapper .item .list .payItem .tip {
  width: 49%;
  text-align: center;
  font-size: 26rpx;
  color: #aaa;
}

.moneyList {
  margin-top: 15rpx;
  background-color: #fff;
  padding: 30rpx;
}

.moneyList .item {
  font-size: 28rpx;
  color: #282828;
}

.moneyList .item ~ .item {
  margin-top: 20rpx;
}

.moneyList .item .money {
  color: #666666;
}

.footer {
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
}

.footer .settlement {
  font-size: 30rpx;
  color: #fff;
  width: 240rpx;
  height: 70rpx;
  background-color: #fc5445;
  border-radius: 50rpx;
  text-align: center;
  line-height: 70rpx;
}

.footer .transparent {
  opacity: 0;
}

.font-color {
  color: red;
}
</style>
